<template>
	<div class="alternativeresume">
		<el-row style="margin-top: 40px;margin-bottom: 24px;">
			<el-col>
				<head-top title='在招职位'></head-top>
				<div class="accountinfo">
					<div class="rowtitle flex">
						<div class="item" @click.top="tabindex=1" :class="tabindex==1?'activetab':''">账号信息</div>
						<div class="item" @click.top="tabindex=2" :class="tabindex==2?'activetab':''">修改手机号</div>
						<div class="item" @click.top="tabindex=3" :class="tabindex==3?'activetab':''">修改密码</div>
						<div class="item" @click.top="tabindex=4" :class="tabindex==4?'activetab':''">修改邮箱</div>
					</div>

					<div class="section" v-show="tabindex==1">
						<div class="s_row"> <span>手机号：</span>{{info.loginPhone}}</div>
						<div class="s_row"> <span>邮箱：</span>{{info.email}} </div>
						<div class="s_row border-btm"> <span>登录密码：</span>******</div>
					</div>
					<div class="section" v-show="tabindex==2">
						<div class="s_row"> <span>当前手机号：</span>{{info.loginPhone}} </div>
						<div class="s_row"> <span>新手机号：</span><input type="number" v-model="phone" class="srk" placeholder="请输入手机号码"></div>
						<div class="s_row"> <span>验证码：</span><input type="number" v-model="code" class="srk" placeholder="请输入验证码"> <span
							 class="getcode">获取验证码</span></div>
						<div class="s_row" style="font-size: 12px;">注：手机号码用于登录、接收HR来电。修改成功后，请使用新手机号登录</div>
						<div class="s_row" style="display: flex;justify-content: center;">
							<div class="savebtn" @click.stop="editePhone">保存</div>
						</div>
					</div>
					<div class="section" v-show="tabindex==3">
						<div class="s_row"> <span>旧密码：</span><input type="number" v-model="oldPassword" class="srk" placeholder="请输入旧密码"></div>
						<div class="s_row"> <span>新密码：</span><input type="number" v-model="newPassword" class="srk" placeholder="请输入新密码">
						</div>
						<div class="s_row"> <span>确认密码：</span><input type="number" v-model="repwd" class="srk" placeholder="请确认密码"> </div>
						<div class="s_row" style="display: flex;justify-content: center;">
							<div class="savebtn" @click="editepwd">保存</div>
						</div>
					</div>
					<div class="section" v-show="tabindex==4">

						<div class="s_row"> <span>新邮箱：</span><input type="text" class="srk" placeholder="请输入新邮箱" v-model="email"> </div>

						<div class="s_row" style="display: flex;justify-content: center;">
							<div class="savebtn" @click.stop="saveEmail">保存</div>
						</div>
					</div>
				</div>
				<head-top title='人事辅助手机' style="margin-top: 80px;"></head-top>
				<div class="accountinfo">
					<div class="section" style="margin-bottom: 40px;">
						<div class="s_row"> <span>手机号：</span>188*****6545 </div>
						<div class="edite" v-if="iseditephone==false" @click="iseditephone=true">
							<img src="../../../static/image/edite.png" alt="" class="src">修改
						</div>
					</div>
					<div class="section" v-if="iseditephone==true">
						<div class="s_row"> <span>手机号：</span><input type="number" v-model="phone" class="srk" maxlength="11" placeholder="请输入手机号码"></div>
						<div class="s_row"> <span>验证码：</span><input type="number" v-model="code" class="srk" placeholder="请输入验证码"> <span
							 class="getcode">获取验证码</span></div>
						<div class="s_row" style="display: flex;">
							<div class="savebtn cencel" @click="cancelAssistPhone">取消</div>
							<div class="savebtn" @click="saveAssistPhone">保存</div>
						</div>
					</div>
				</div>

				<!-- <head-top title='招聘人二' style="margin-top: 80px;"></head-top>
				<div class="accountinfo">
					<div class="section" style="margin-bottom: 40px;">
						<div class="s_row"> <span>邱爱英</span>总经理助理 </div>
						<div class="edite" v-if="iseditename==false" @click="iseditename=true">
							<img src="../../../static/image/edite.png" alt="" class="src">修改
						</div>
					</div>
					<div class="section" v-if="iseditename==true">
						<div class="s_row"> <span>姓名：</span><input type="text" class="srk" placeholder="请输入姓名"></div>
						<div class="s_row"> <span>职务：</span><input type="text" class="srk" placeholder="请输入职务"> </div>
						<div class="s_row" style="display: flex;">
							<div class="savebtn cencel" @click="iseditename=false">取消</div>
							<div class="savebtn">保存</div>
						</div>
					</div>
				</div> -->
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import {
		GetCompanyInfo,
		UpdateCompanyPhone,
		UpdateCompanyPass,
		UpdateCompanyEmail,
		UpdateCompanyAssistPhone
	} from '@/api/getData'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				tabindex: 1,
				iseditephone: false,
				iseditename: false,
				info: {},
				phone: '',
				code: '',
				oldPassword: '',
				newPassword: '',
				repwd: '',
				email: '',
			}
		},
		components: {
			headTop,
		},
		created() {
			this.GetCompanyInfo();
		},

		methods: {
			...mapMutations(['saveAdminInfo']),
			cancelAssistPhone() {
				let that = this;
				that.phone = '';
				that.code = '';
				that.iseditephone = false;
				
			},
			//更新短信辅助手机号
			async saveAssistPhone() {
				let that = this;
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (that.phone == '') {
					that.showToast('请输入手机号码', 'warning');
					return false;
				}
				if (!myreg.test(that.phone)) {
					that.showToast('请输入正确的手机号', 'warning');
					return false;
				}
				const res = await UpdateCompanyAssistPhone({
					phone: that.phone,
					code: that.code
				});
				if (res.code == 1) {
					that.showToast('修改成功', 'success');
					that.phone = '';
					that.code = '';
					that.iseditephone = false;
				} else {
					that.showToast(res.msg, 'error');

				}
			},

			//修改邮箱
			async saveEmail() {
				let that = this;
				if (that.email == '') {
					that.showToast('邮箱不能为空', 'warning');
					return false;
				}
				const res = await UpdateCompanyEmail({
					param: that.email
				});
				if (res.code == 1) {
					that.showToast('修改成功', 'success');
					that.reSet();
				} else {
					that.showToast(res.msg, 'error');
				}

			},
			//修改登录密码
			async editepwd() {
				let that = this;
				if (that.oldPassword == '') {
					that.showToast('旧密码不能为空', 'warning');
					return false;
				}
				if (that.newPassword == '') {
					that.showToast('新密码不能为空', 'warning');
					return false;
				}
				if (that.repwd == '') {
					that.showToast('请确认密码', 'warning');
					return false;
				}
				if (that.newPassword != that.repwd) {
					that.showToast('两次密码输入的不一致', 'warning');
					return false;
				}
				const res = await UpdateCompanyPass({
					oldPassword: that.oldPassword,
					newPassword: that.newPassword
				});
				if (res.code == 1) {
					that.showToast('修改成功', 'success');
					that.reSet();
				} else {
					that.showToast(res.msg, 'error');
				}
			},

			//修改手机号
			async editePhone() {
				let that = this;
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (that.phone == '') {
					that.showToast('请输入手机号码', 'warning');
					return false;
				}
				if (!myreg.test(that.phone)) {
					that.showToast('请输入正确的手机号', 'warning');
					return false;
				}
				const res = await UpdateCompanyPhone({
					phone: that.phone,
					code: that.code
				});
				if (res.code == 1) {
					that.showToast('修改成功', 'success');
					that.reSet();
				} else {
					that.showToast(res.msg, 'error');

				}
			},
			async GetCompanyInfo() {
				const res = await GetCompanyInfo();
				if (res.code == 1) {
					console.log(res.data);
					this.info = res.data;
					this.saveAdminInfo(this.info);
				} else {

				}
			},
			//提示框
			showToast(msg, icon) {
				let that = this;
				that.$message({
					message: msg,
					type: icon ? icon : 'none'
				});
			},

			//重置
			reSet() {
				let that = this;
				that.phone = '';
				that.code = '';
				that.tabindex = 1;
				that.email = '';
				that.GetCompanyInfo();
			}
		}
	}
</script>
<style>
	/* chrome */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	/* 火狐浏览器 */
	input[type="number"] {
		-moz-appearance: textfield;
	}
</style>
<style lang="less" scoped="scoped">
	@import '../../style/mixin';

	.accountinfo {
		width: 100%;
		height: auto;
		margin-top: 39px;

		.rowtitle {
			width: 60%;

			.item {
				width: 25%;
				height: 45px;
				line-height: 45px;
				text-align: center;
				cursor: pointer;
			}
		}

		.activetab {
			background-color: #FFFFFF !important;
			color: #226FFF;
			font-size: 16px;
		}

		.border-btm {
			margin-bottom: 0px !important;
		}

		.section {
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			padding: 40px 40px 20px;
			box-sizing: border-box;
			position: relative;

			.edite {
				position: absolute;
				right: 40px;
				top: 0px;
				bottom: 0px;
				margin: auto;
				display: flex;
				align-items: center;
				color: #226FFF;
				font-size: 16px;
				cursor: pointer;

				img {
					width: 18px;
					height: 18px;
					margin-right: 10px;
				}
			}

			.s_row {
				font-size: 16px;
				color: #333333;
				margin-bottom: 20px;

				.cencel {
					background-color: #CCCCCC !important;
					font-size: 16px !important;
					color: #FFFFFF !important;
					margin-right: 40px;
				}

				.savebtn {
					cursor: pointer;
					width: 110px;
					height: 36px;
					background: #226FFF;
					text-align: center;
					font-size: 16px;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 36px;
					color: #FFFFFF;
				}

				.srk {
					width: 200px;
					height: 28px;
					background: #F8F8FB;
					border: 1px solid #EEEEEE;
					padding-left: 10px;
					box-sizing: border-box;
				}

				.getcode {
					margin-left: 0px;
					cursor: pointer;
				}


				span {
					color: #999999;
					width: 100px;
					display: inline-block;
					text-align: left;
					// margin-right: 10px;
				}
			}

		}
	}
</style>
